import { reqGetBaseInfo, reqGetProfile, reqLogin } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const state = {
  token: getToken() || '',
  userInfo: {}
}
// 同步的修改
const mutations = {
  setTokenInfo(state, newToken) {
    // 存储在vuex中 => 这个信息如果说要在很多地方用 => vuex中
    state.token = newToken
    // 同时本地存储  cookie => 安全 / 移动端禁用+难用(js-cookie)
    setToken(newToken)
  },

  removeToken(state) {
    // 清除vuex里面的token
    state.token = ''
    // 同时清除cookie 的token
    removeToken()
  },

  setUserInfo(state, newUserInfo) {
    state.userInfo = newUserInfo
  },

  // 将来退出时, 清除用户信息
  removeUserInfo(state) {
    state.userInfo = {}
  }
}
// 封装异步的操作 => 请求是异步的  => 封装action中
const actions = {

  // 点退出按钮 => logout
  logout(context) {
    // 1.清除token
    context.commit('removeToken')
    // 2.清除用户信息
    context.commit('removeUserInfo')
    // 3.重置路由
    resetRouter()
    // 4.清空vuex 路由权限
    // 如果你需要在一个模块内部 提交另一个 模块内部的mutation ,传第三个参数 {root: true}
    // 1.{root: true} 先回到主模块 2.找到permission/setRoutes 进行提交
    context.commit('permission/setRoutes', [], {
      root: true
    })
    // 5.重置主题色
    // 跨模块提交mutation传第三个参数
    context.commit('settings/resetTheme', null, { root: true })
  },

  // const res = login()

  async login(context, data) {
    const res = await reqLogin(data)
    console.log(res)
    const token = res.data
    context.commit('setTokenInfo', token)
    return res
    // return undefined

    // promise => 异步操作的容器
    // return new Promise((resolve, reject) => {
    //   reqLogin(data).then(res => {
    //     const token = res.data
    //     context.commit('setTokenInfo', token)
    //     resolve(res)
    //   }).catch(err => {
    //     reject(err)
    //   })
    // })
  },

  // getUserInfo(context) {
  //   return new Promise((resolve, reject) => {
  //     // 这里套了一层promise 是为了将来请求(异步操作)结束以后, 再做某件事
  //     reqGetProfile().then(res => {
  //       console.log(res)
  //       const { data } = res
  //       context.commit('setUserInfo', data)
  //       resolve(data)
  //     }).catch((err) => {
  //       reject(err)
  //     })
  //   })
  // }

  // 已经完成需求了:  promise => async
  // async函数将来默认就会返回一个promise => 自动帮你套一层promise

  // as 模块化导入换名
  // : 解构换名字
  async getUserInfo(context) {
    // 获取用户基本资料(不含头像)
    const { data: data1 } = await reqGetProfile()
    // console.log(res, 666)
    // 获取用户基本信息(包含头像)
    const { data: data2 } = await reqGetBaseInfo(data1.userId)

    // 将用户基本信息和用户基本资料 两个数据合并
    const resultObj = {
      ...data1,
      ...data2
    }
    // console.log(data1, data2, resultObj, 111)
    // console.log(data2, 444)
    // const { data } = res
    context.commit('setUserInfo', resultObj)
    // async函数内部 return 结果 相当于 resolve(结果)
    return resultObj
  }

}
// 计算属性
const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
